<template>
  <div class="layout">
    <div class="article-panel" ref="target">
      <Row>
        <Col :span="18">
          <List item-layout="vertical" class="article-list" size="large">
            <div v-if="data.length<1" style="width: 100%;text-align: center;padding: 175px 0">
              <p>没有数据...</p>
            </div>
            <ListItem style="text-align: left;padding: 9px 10px;margin: 5px 10px" v-for="item in data" :key="item.id">
              <router-link :to="{ name: 'Article', params: { id: item.id }}">
                <div class="title" v-line-clamp="1">{{ item.title }}</div>
              </router-link>
              <template #extra>
                <div style="display: flex;min-width: 90px">
                  <div v-if="!item?.update_at">
                    <Icon type="ios-time-outline"/>
                    {{ item?.create_at ? item?.create_at : '-' }}
                  </div>
                  <div v-else>
                    <Icon type="ios-timer-outline"/>
                    {{ item?.update_at ? item?.update_at : '-' }}
                  </div>
                </div>
              </template>
            </ListItem>
          </List>
          <Page
              class="article-page"
              v-model="page"
              :page-size="pageSize"
              :total="total"
              :page-size-opts="[15,20,30,50]"
              @on-change="changePage"
              @on-page-size-change="changePageSize"
              show-sizer
              show-total
              show-elevator/>
        </Col>
        <Col :span="6">
          <div style="width: 100%;height: 100%;text-align: left">
            <Card title=" " icon="ios-options" :padding="0" shadow style="min-height:390px;">
              <CellGroup  @on-click="changeOrderTime">
                <Cell title="排序方式" disabled/>
                <Cell
                    title="创建时间"
                    name="create_at"
                    :selected="selectName === 'create_at'"
                />
                <Cell
                    title="更新时间"
                    name="update_at"
                    :selected="selectName === 'update_at'"
                />
              </CellGroup>
<!--              <CellGroup>-->
<!--                <Cell title="标题查询" disabled/>-->
<!--              </CellGroup>-->
<!--              <Row style="margin: 0 10px" :gutter="5">-->
<!--                <Col :span="24">-->
<!--                  <Select-->
<!--                      v-model="selectedLabels"-->
<!--                      @on-change="selectLabel"-->
<!--                      @on-clear="clearLabels"-->
<!--                      filterable-->
<!--                      multiple-->
<!--                      clearable-->
<!--                  >-->
<!--                    <Option v-for="(item,index) in labelsList" :value="index" :key="index">{{ item }}</Option>-->
<!--                  </Select>-->
<!--                </Col>-->
<!--              </Row>-->
              <CellGroup>
                <Cell title="标签" disabled/>
              </CellGroup>
              <Row style="margin: 0 10px" :gutter="5">
                <Col :span="24">
                  <Select
                      v-model="selectedLabels"
                      @on-change="selectLabel"
                      @on-clear="clearLabels"
                      filterable
                      multiple
                      clearable
                  >
                    <Option v-for="(item,index) in labelsList" :value="index" :key="index">{{ item }}</Option>
                  </Select>
                </Col>
              </Row>
              <CellGroup>
                <Cell title="分类" disabled/>
              </CellGroup>
              <Row style="margin: 0 10px" :gutter="5">
                <Col :span="12">
                  <Select v-model="categoryType" @on-change="selectCategoryType" @on-clear="clearType" clearable>
                    <Option v-for="(item,index) in categoryTypeList" :value="index" :key="index">{{ item }}</Option>
                  </Select>
                </Col>
                <Col :span="12">
                  <Select v-model="category" @on-change="selectCategory"  @on-clear="clearCategory" clearable>
                    <Option v-for="(item,index) in categoryList" :value="index" :key="item.index">{{ item }}</Option>
                  </Select>
                </Col>
                <Col :span="24" style="margin-top: 25px;text-align: right;position: absolute;bottom: 10px;right: 10px">
                  <Button type="dashed" @click="handleReset"  ghost>重置</Button>
                  <Button type="dashed" style="margin-left: 10px;color: #515a6e" @click="getArticleList" ghost>确定</Button>
                </Col>
              </Row>

            </Card>
          </div>
        </Col>
      </Row>

    </div>
    <Spin size="large" fix :show="spinShow"></Spin>
  </div>
</template>
<script>
import { getList } from '../../api/article'
import { getLabelsColumn } from '../../api/labels'
import { getCategoryType, getCategory } from '../../api/category'

export default {
  name: 'ArticleIndex',
  components: {},
  data() {
    return {
      page: 1,
      pageSize: 15,
      total: 10,
      spinShow: true,
      data: [],
      selectName: 'create_at',
      selectedLabels: [],
      labelsList: [],
      categoryType: 0,
      categoryTypeList: [],
      category: 0,
      categoryList: []
    }
  },
  created() {
    this.getLocalStorage()
    this.getArticleList()
    this.getLabels()
    this.getCategoryTypeList()
  },
  mounted() {
    this.getArticleList()
  },
  methods: {
    getLocalStorage() {
      const localPage = localStorage.getItem('article_page')
      const localPageSize = localStorage.getItem('article_page_size')
      const selectName = localStorage.getItem('article_page:select_name')
      const selectLabels = localStorage.getItem('article_page:select_labels')
      const selectCategory = localStorage.getItem('article_page:select_category')
      const selectCategoryType = localStorage.getItem('article_page:select_category_type')

      this.page = localPage ? parseInt(localPage, 10) : 1
      this.pageSize = localPageSize ? parseInt(localPageSize, 10) : 15
      this.selectedLabels = JSON.parse(selectLabels)

      if (selectName) {
        this.selectName = selectName
      }

      if (selectCategoryType) {
        this.categoryType = selectCategoryType
        this.getCategoryList()
      }

      if (selectCategory) {
        this.category = selectCategory
      }
    },

    getLabels() {
      getLabelsColumn().then((res) => {
        this.labelsList = res.data
        this.spinShow = false
      }).catch(() => {
        this.spinShow = false
      })
    },

    getCategoryTypeList() {
      getCategoryType().then((res) => {
        this.categoryTypeList = res.data
      }).catch(() => {
      })
    },

    getArticleList() {
      const params = {
        page: this.page,
        page_size: this.pageSize,
        labels: this.selectedLabels,
        category: this.category,
        order: this.selectName
      }

      getList(params).then((res) => {
        this.data = res.data.list
        this.total = res.data.total

        this.spinShow = false
      }).catch(() => {
        this.spinShow = false
      })
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize

      localStorage.setItem('article_page_size', pageSize)
      this.getArticleList()
      this.$ScrollIntoView(this.$refs.target, {
        time: 300,
        align: {
          top: 0,
          topOffset: 120
        }
      })
    },
    changePage(page) {
      this.page = page

      localStorage.setItem('article_page', page)
      this.getArticleList()
      this.$ScrollIntoView(this.$refs.target, {
        time: 300,
        align: {
          top: 0,
          topOffset: 120
        }
      })
    },
    changeOrderTime(value) {
      if (value !== undefined) {
        localStorage.setItem('article_page:select_name', value)
        this.selectName = value
        this.getArticleList()
      }
    },

    selectLabel(value) {
      if (value !== undefined) {
        localStorage.setItem('article_page:select_labels', JSON.stringify(value))
      }
    },

    getCategoryList() {
      getCategory({ category_type: this.categoryType }).then((res) => {
        this.categoryList = res.data
      }).catch(() => {})
    },

    selectCategoryType(value) {
      if (value !== undefined) {
        localStorage.setItem('article_page:select_category_type', value)
        this.getCategoryList()
      }
    },

    selectCategory(value) {
      if (value) {
        localStorage.setItem('article_page:select_category', value)
      }
    },

    handleReset() {
      localStorage.clear()
      this.page = 1
      this.pageSize = 15
      this.selectName = 'create_at'
      this.selectedLabels = []
      this.categoryType = 0
      this.category = 0
    },

    clearType() {
      this.categoryType = 0
      localStorage.removeItem('article_page:select_category_type')
    },

    clearCategory() {
      this.category = 0
      localStorage.removeItem('article_page:select_category')
    },

    clearLabels() {
      this.selectedLabels = []
      localStorage.removeItem('article_page:select_labels')
    }

  }
}

</script>
<style scoped>
.layout {
  background: #f5f7f9;
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  margin-top: 100px;
}

.title {
  color: black;
  font-size: 16px;
}

.title:hover {
  color: dodgerblue;
}

.article-panel {
  margin: auto;
  width: 75%;
  text-align: center;
}

.article-list {
  background-color: white;
  border-radius: 3px;
  padding: 10px;
  margin: 0 30px;
  text-align: left;
  min-height: 390px;
}

.article-page {
  margin: 30px;
}

</style>
